<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrapper div:first-child {
			height: 430px
		}
		ul {
			list-style: none;
		}
		ul li {
			float: left;
			padding: 12px 20px;
			margin-right: 5px;
			background-color: #eee;
			color: #555;
		}
		ul li.current {
			background-color: #b50013;
			color: white;
		}
		img {
			display: none;
		}
		img.active {
			display: block;
		}
	</style>

</head>
<body>
	<div class = "wrapper">
		<div>
			<img src="img/1.jpg" alt="" class = "active">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
		</div>
		<div>
			<ul>
				<li class = "current">北极海鸥</li>
				<li>捕蝇草</li>
				<li>雪豹</li>
			</ul>
		</div>
	</div>

</body>
<script>
	var lis = document.querySelectorAll("li");
	var imgs = document.querySelectorAll("img");

	for(var i = 0;i<lis.length;i++){

		lis[i].index = i;

		// 清空里面的每个className
		lis[i].onmouseover = function(){

			for(var j = 0;j<lis.length;j++)	{
			
				lis[j].className = "";
				imgs[j].className = "";
			}

			//给当前点击的事件添加一个类名,之前的错误是在于括号问题
			this.className = "current";
			imgs[this.index].className = "active";
		}
	}
</script>
</html>